<% extends "admin/layout.html" %>
<% block main%>
    <style>
        #progress_loading{
            display:none;
            margin:20px auto 10px;
            width:80%;
        }
    </style>
        <fieldset class="layui-elem-field">
          <legend>数据表格</legend>
          <div class="layui-field-box">
                <button class="layui-btn layui-btn-danger" id="reload_data">刷新关系</button>
                  <div class="layui-progress" id="progress_loading" lay-filter="progress_loading" lay-showPercent="yes">
                    <div class="layui-progress-bar" lay-percent="0%"></div>
                  </div>
                <table id="img_link" lay-filter="img_link"></table>
          </div>
        </fieldset>
<% endblock %>
<% block script %>
    $('#link').addClass('layui-this');
      //第一个实例
      table.render({
        elem: '#img_link'
        ,method: 'post'
        ,url: '<< url_for("link") >>' //数据接口
        ,page: {
              curr: location.hash.replace('#!fenye=', '')
              ,hash: 'fenye'
              ,limit:10
            } //开启分页
        ,cols: [[ //表头
          {field: 'id', title: 'ID', sort: true, fixed: 'left'}
          ,{field: 'source_node_name', title: '来源节点名'}
          ,{field: 'target_node_name', title: '目标节点名'}
          ,{field: 'weight', title: '权重'}
        ]]
      });
     function task_progress(task_id,task_name){
        $.ajax({
            url:'/process?task_id='+task_id+'&task_name='+task_name,
            dataType:'json',
            success:function(res){
                if(res.status=='PROGRESS' || res.status=='STARTED'){
                    element.progress('progress_loading', res.progress+'%');
                    setTimeout(function(){ task_progress(task_id,task_name)}, 5000);
                }
                else if(res.status=='SUCCESS'){
                    element.progress('progress_loading', '100%');
                    setTimeout(function(){ $('#progress_loading').hide() },1000);
                }
                else if(res.status=='PENDING'){
                    element.progress('progress_loading', '0%');
                    alert('任务在排队')
                    setTimeout(function(){ task_progress(task_id,task_name)}, 5000);
                }
                else{
                    element.progress('progress_loading', '0%');
                    alert('后台进程异常，请稍后重试')
                    setTimeout(function(){ $('#progress_loading').hide() },1000);
                }
            }
        })
     }
     $('#reload_data').click(function(){
        $('#progress_loading').show();
        element.progress('progress_loading', '0%');
        $.ajax({
            url:'/reload?task_name=reload_link',
            dataType:'json',
            success:function(res){
                task_id=res.task_id
                setTimeout(function(){ task_progress(task_id,'reload_link')}, 5000);
            },
            error:function(){
                element.progress('progress_loading', '100%');
                setTimeout(function(){ $('#progress_loading').hide() },1000);
            }
        });
     });
<% endblock %>